WIP LIFFアプリのSPA開発
背景
仕事でLIFFを作ることが多い。LIFFでアプリを作る時にはWebベースのフロントエンドが必要になる。その際にNext.jsやRemixのようなフレームワークを使うのは正直デカすぎる。というのもLIFFというのは言うてしまえばLINEという大きな幹に連なる単なる枝の一つであり、多くの場合にはコンパクトなUI/機能で済むことが多いのだ。 LIFFはLINEの内部でのwebview起動しか基本的には想定しなくて良いため極論router的なものもなくていいことも多い(ペライチページ+アルファみたいなとかだ)し、SSRなんて大袈裟な仕組みも不要。LINEログイン必須なので認証なしでアクセスできるページはなくSEOも考えなくて良い。静的なファイルをどかっとインストールして貰えれば十分だ。
こういうことをするためにRemix SPAなんかが良いのでは？と聞いたが、まだあれはexperimentalな感じ。以前はcreate-vue-appで作った環境でやっていたが、正直5年くらい前の環境で古くなっており自分自身の普段使いReactなのでReactでいきたい。が、create-react-appはもう非推奨らしい(Create React Appは役割を終えました)。 ということでvite(発音はヴィート)でSPA環境を考えてみるか？ 構成
デプロイ
本番環境としてはNetlify/Vercel/Firebase Hosting/Cloudflare Pagesなどがあるが一番楽なのはCloud StorageやS3にassets諸共全部置くだけのやつ。実際仕事でもよくS3に生成物を置いて、リクエストをFastly+webサーバーのサーバーでリバプロしてる(既存のRailsアプリと同じドメイン配下で表示されるようにしたいというビジネス的な理由)。なので今回も生成物をストレージに置くだけ構成でいったん考えてみる。
状態管理
LIFFのSPAでは結構ユーザーインタラクションが多いアプリを作ることがよくあり、ページを跨いで状態を保持したいことが多い。
ルーティング
createBrowserRouter
History APIを利用したreact router推奨のルーター
Docsを読んでたがBreaking Changeが多いのとこんなOpnionatedで高性能な必要なくね？となっている。Reddit - Dive into anythingとか読むとボロクソ言われてるので別のRouterを探しても良いかも。↓この辺がお勧めされている。 routerだけに絞った機能で十分ならこれで良さそう
GitHubの中の人が作ってるらしい。RouterだけじゃなくTanStack Queryとか色々あるっぽい。結局これも高機能でデカすぎるな...
まぁとりあえずTanstack Routerを使ってみるか。
code:sh
npm install @tanstack/react-router
npm install --save-dev @tanstack/router-vite-plugin @tanstack/router-devtools
使ってみたがtanstackは規約的に覚えないといけないことが結構あるし機能が多すぎる。俺はページ遷移をいい感じにやってほしいだけなんや...
wouterの方も試す。日本語の紹介記事はこれくらいしかない。
テスト
lint/formatterなど
code:sh
npm install --save-dev --save-exact @biomejs/biome
npx @biomejs/biome init
code:.vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"quickfix.biome": "always",
"source.organizeImports.biome": "always"
},
"editor.defaultFormatter": "biomejs.biome"
},
"editor.defaultFormatter": "biomejs.biome"
},
"editor.defaultFormatter": "biomejs.biome"
},
"editor.defaultFormatter": "biomejs.biome"
}
}
code:biome.json
{
"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true
}
},
"javascript": {
"parser": {
"unsafeParameterDecoratorsEnabled": true
},
"formatter": {
"enabled": true,
"quoteStyle": "single",
"jsxQuoteStyle": "single",
"trailingComma": "all",
"semicolons": "asNeeded",
"arrowParentheses": "asNeeded",
"indentWidth": 2,
"indentStyle": "space",
"lineWidth": 80,
"quoteProperties": "asNeeded"
}
},
"json": {
"parser": { "allowComments": true },
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2,
"lineWidth": 80
}
}
}
実践
package管理はbunでやる。とりあえずcreate-viteを使いVite/React/TypeScriptでscaffoldingをする。 LIFF公式のcreate cliを使う。react -> typescriptを選ぶ。LIFFを作成するチャネルのIDも指定しておく。
code:sh
npx @line/create-liff-app
npm run dev
これでとりあえず認証できるページの基礎はサクッと作成完了。
WIP 必要な機能
LINEログイン
APIとのやりとり
複数画面間での状態共有/更新
クエリパラメータによる遷移先の分岐(LIFFの場合、TOPのLIFF URLが固定であるだけでその他のパスへのURLがない。なので任意のページを開かせたい場合はクエリパラメータを見て挙動を変える必要がある)
リソース